import React from 'react';
import { SafeAreaView, FlatList } from 'react-native';
import Item from './Item';
import config from '@/global/config';
import Footer from './Footer';
import Line from './Line';

const img1 = 'https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_skill/9760ee8b-e374-4b47-a2a2-2d734dceb9b2_1749192002654370775~tplv-a9rns2rl98-web-thumb-watermark-v2.jpeg?rk3s=b14c611d&x-expires=1780728002&x-signature=y8koMug4wgY2mn9dWJUwmt%2Ft7jw%3D'

const img2 = 'https://p3-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_skill/e4c64e2b-5995-4e05-a1e1-8533f7e77083_1749192002707380695~tplv-a9rns2rl98-web-thumb-watermark-v2.jpeg?rk3s=b14c611d&x-expires=1780728002&x-signature=FTdLZf5Rlb83j9KoI2U2uSuww2E%3D'

const img3 = 'https://p3-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_skill/26789143-25d4-4c08-b3d5-392427a19263_1749192002688688068~tplv-a9rns2rl98-web-thumb-watermark-v2.jpeg?rk3s=b14c611d&x-expires=1780728002&x-signature=RE4t%2Fp%2Fgwo0z3gBNjay2XmmKWIg%3D'

const img4 = 'https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_skill/4dc8d997-db09-4d67-8af0-1f51c9ad31f8_1749199346124996515~tplv-a9rns2rl98-web-thumb-watermark-v2.jpeg?rk3s=b14c611d&x-expires=1780735346&x-signature=o0Y8MuaX2mwK6SyPMsVb%2B6YQkxE%3D'

const data = [
  { id: '1', name: 'dilireba', text: '这是一串很长很长的文案，今天天气很不错哦，棒棒哒', img: img1, avatar: config.RNTinyLogo },
  { id: '2', name: 'xiaoming', text: '在React Native中，View组件默认是垂直排列的，即使它使用了flex布局', img: img2, avatar: config.RNTinyLogo },
  { id: '3', name: 'lihua', text: '要让两个子元素水平排列，你需要显式设置flexDirection属性为"row"', img: img3, avatar: config.RNTinyLogo },
  { id: '4', name: 'React Native', text: 'React Native 将原生开发的最佳部分与 React 相结合， 致力于成为构建用户界面的顶尖 JavaScript 框架。', img: img4, avatar: config.RNSvgLogo },
]

export default function SocialFeedScreen(): React.ReactElement {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        keyExtractor={(item) => item.id}
        data={data}
        renderItem={({ item }) => <Item item={item} />}
        ListFooterComponent={() => <Footer />}
        ItemSeparatorComponent={() => <Line />}
      />
    </SafeAreaView>
  );
}